<template>
	<el-dialog :title="ruleForm.ID!=='0'?'修改套餐':'创建套餐'" v-model="isShowDialog" width="650px"
		:close-on-click-modal="false" :close-on-press-escape="false">
		<el-form :model="ruleForm" size="default" label-width="120px" ref="formRef">
			<el-row :gutter="35">
				<el-input v-model="ruleForm.ID" type="hidden"></el-input>
				<el-col :xs="24" :sm="18" :md="18" :lg="18" :xl="18" class="mb20">
					<el-form-item label="服务名称" :rules="[{ required: true, message: '请输入服务名称'}]" prop="Name">
						<el-input v-model="ruleForm.Name" placeholder="请输入服务名称" clearable
							v-on:keyup.enter="onSubmit(formRef)"></el-input>
					</el-form-item>
				</el-col>
				<el-col :xs="24" :sm="18" :md="18" :lg="18" :xl="18" class="mb20">
					<el-form-item label="原价" :rules="[{ required: true, message: '请输入原价'}]" prop="OriginalPrice">
						<el-input-number v-model="ruleForm.OriginalPrice" :min="0" :step="0.01" />
					</el-form-item>
				</el-col>
				<el-col :xs="24" :sm="18" :md="18" :lg="18" :xl="18" class="mb20">
					<el-form-item label="单价" :rules="[{ required: true, message: '请输入单价'}]" prop="Price">
						<el-input-number v-model="ruleForm.Price" :min="0" :step="0.01" />
					</el-form-item>
				</el-col>
				<el-col :xs="24" :sm="18" :md="18" :lg="18" :xl="18" class="mb20">
					<el-form-item label="月份数" :rules="[{ required: true, message: '请输入月份数'}]" prop="Months">
						<el-input-number v-model="ruleForm.Months" :min="1" :step="1" />
					</el-form-item>
				</el-col>
				<el-col :xs="24" :sm="18" :md="18" :lg="18" :xl="18" class="mb20">
					<el-form-item label="套餐说明"  prop="Description">
						<el-input v-model="ruleForm.Description" placeholder="请输入套餐说明" clearable
							v-on:keyup.enter="onSubmit(formRef)" type="textarea"></el-input>
					</el-form-item>
				</el-col>
			</el-row>
		</el-form>

		<template #footer>
			<span class="dialog-footer">
				<el-button @click="onCancel" size="default">取 消</el-button>
				<el-button type="primary" @click="onSubmit(formRef)" size="default"> 提交 </el-button>
			</span>
		</template>
	</el-dialog>
</template>

<script lang="ts">
	import {
		reactive,
		toRefs,
		onMounted,
		nextTick,
		ref,
	} from 'vue';
	import {
		usePageApis
	} from '/@/api/EnterpriseServicePackage/index';
	import {
		ElForm,
		ElMessage
	} from 'element-plus';
	export default {
		name: 'EditForm',
		setup() {
			const APIList = usePageApis();
			type FormInstance = InstanceType < typeof ElForm > ;
			const formRef = ref < FormInstance > ();
			const state = reactive({
				isShowDialog: false,
				ruleForm: {
					ID: '0',
					Name: '',
					OriginalPrice: 0,
					Price: 0,
					Months: 1,
					Description: '',
					Status: '',
					CreateTime: '',
				}

			});
			// 打开弹窗
			const openDialog = (model: Object, callback: Function) => {

				state.ruleForm = model;
				state.isShowDialog = true;
				state.callback = callback;

			};
			// 关闭弹窗
			const closeDialog = () => {
				state.ruleForm = {
					ID: '0',
					Name: '',
					OriginalPrice: 0,
					Price: 0,
					Months: 1,
					Description: '',
					Status: '',
					CreateTime: '',
				}
				formRef.value.resetFields();
				state.isShowDialog = false;
			};
			// 取消
			const onCancel = () => {
				closeDialog();
			};

			const onSubmit = (formEl: FormInstance | undefined) => {

				if (!formEl) return;
				formEl.validate((valid) => {
					if (valid) {
						let api = state.ruleForm.ID !== '0' ? APIList.updateAPI : APIList.createAPI;
 
						api(state.ruleForm).then(async (response) => {
							//console.log(response);
							if (response['code'] === 0) {
								if (state.callback) {
									state.callback();
								}
								ElMessage.success(`${response.message}`);
								closeDialog();
							}


						});
					} else {

						return false
					}
				})
			};

			// 页面加载时
			onMounted(() => {

			});
			nextTick(() => {

			});

			return {
				formRef,
				openDialog,
				closeDialog,
				onCancel,
				onSubmit,
				...toRefs(state),
			};
		},
	};
</script>
